import { getProfileAsync } from '@/store/index'
import styles from './index.module.scss'
import { Link } from 'react-router-dom'
import Icon from '@/components/icon'
import { useInitialState } from '@/hooks/useInitialState'
import { useNavigate } from 'react-router-dom'

export default function Profile() {
  const navigate = useNavigate()
  const { profile: user } = useInitialState(getProfileAsync, 'loginSlice')

  return (
    <>
      <div className={styles.root}>
        <div className="profile">
          {/* 个人信息 */}
          <div className="user-info">
            <div className="avatar">
              <img src={user.photo} alt="" />
            </div>
            <div className="user-name">{user.name}</div>
            <Link to="/profile/edit">
              个人信息 <Icon type="iconbtn_right" />
            </Link>
          </div>

          {/* 今日阅读 */}
          <div className="read-info">
            <Icon type="iconbtn_readingtime" />
            今日阅读
            <span>10</span>
            分钟
          </div>

          {/* 动态 - 对应的这一行 */}
          <div className="count-list">
            <div className="count-item">
              <p>{user.art_count}</p>
              <p>动态</p>
            </div>
            <div className="count-item">
              <p>{user.like_count}</p>
              <p>关注</p>
            </div>
            <div className="count-item">
              <p>{user.fans_count}</p>
              <p>粉丝</p>
            </div>
            <div className="count-item">
              <p>{user.follow_count}</p>
              <p>被赞</p>
            </div>
          </div>

          {/* 消息通知 - 对应的这一行 */}
          <div className="user-links">
            <div className="link-item">
              <Icon type="iconbtn_mymessages" />
              <div>消息通知</div>
            </div>
            <div className="link-item">
              <Icon type="iconbtn_mycollect" />
              <div>收藏</div>
            </div>
            <div className="link-item">
              <Icon type="iconbtn_history1" />
              <div>浏览历史</div>
            </div>
            <div className="link-item">
              <Icon type="iconbtn_myworks" />
              <div>我的作品</div>
            </div>
          </div>
        </div>
        {/* 更多服务 */}
        <div className="more-service">
          <h3>更多服务</h3>
          <div className="service-list">
            <div className="service-item">
              <Icon type="iconbtn_feedback" />
              <div>用户反馈</div>
            </div>
            <div className="service-item" onClick={() => navigate('/chat')}>
              <Icon type="iconbtn_xiaozhitongxue" />
              <div>小智同学</div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}
